<template>
	<a-spin :spinning="loadSpinning">
		<a-form
			ref="formRef"
			:model="formData"
			:rules="formRules"
			layout="vertical"
			:label-col="{ ...layout.labelCol, offset: 0 }"
			:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
		>
			<a-form-item label="密码登录" name="LOGIN_FUNCTION_PASSWORD">
				<a-radio-group v-model:value="formData.LOGIN_FUNCTION_PASSWORD" placeholder="请选择密码登录开关">
					<a-radio value="true">开启</a-radio>
					<a-radio value="false">关闭</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="短信登录" name="LOGIN_FUNCTION_SMS">
				<a-radio-group v-model:value="formData.LOGIN_FUNCTION_SMS" placeholder="请选择短信登录开关">
					<a-radio value="true">开启</a-radio>
					<a-radio value="false">关闭</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="邮箱登录" name="LOGIN_FUNCTION_EMAIL">
				<a-radio-group v-model:value="formData.LOGIN_FUNCTION_EMAIL" placeholder="请选择邮箱登录开关">
					<a-radio value="true">开启</a-radio>
					<a-radio value="false">关闭</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item label="忘记密码" name="LOGIN_FUNCTION_FORGET">
				<a-radio-group v-model:value="formData.LOGIN_FUNCTION_FORGET" placeholder="请选择忘记密码开关">
					<a-radio value="true">开启</a-radio>
					<a-radio value="false">关闭</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item>
				<a-button type="primary" :loading="submitLoading" @click="onSubmit()">保存</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
			</a-form-item>
		</a-form>
	</a-spin>
</template>
<script setup name="pwdForm">
	import { required } from '@/utils/formRules'
	import { message } from 'ant-design-vue'
	import { cloneDeep } from 'lodash-es'
	import configApi from '@/api/dev/configApi'

	const formRef = ref()
	const formData = ref({})
	const loadSpinning = ref(false)
	const submitLoading = ref(false)

	const layout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 12
		}
	}

	const formRules = {
		LOGIN_FUNCTION_PASSWORD: [required('请选择密码登录开关')],
		LOGIN_FUNCTION_SMS: [required('请选择短信登录开关')],
		LOGIN_FUNCTION_EMAIL: [required('请选择邮箱登录开关')],
		LOGIN_FUNCTION_FORGET: [required('请选择忘记密码开关')]
	}

	const category = 'LOGIN_FUNCTION'
	// 查询此界面的配置项,并转为表单
	const param = {
		category: category
	}
	configApi
		.configList(param)
		.then((data) => {
			if (data) {
				data.forEach((item) => {
					formData.value[item.configKey] = item.configValue
				})
			} else {
				message.warning('表单项不存在，请初始化数据库')
			}
		})
		.finally(() => {
			loadSpinning.value = false
		})

	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			let submitParam = cloneDeep(formData.value)
			const param = Object.entries(submitParam).map((item) => {
				return {
					category: category,
					configKey: item[0],
					configValue: item[1]
				}
			})
			configApi
				.configEditForm(param)
				.then(() => {})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}

	// 重置表单，且设置默认值
	const resetForm = () => {
		formData.value = {
			LOGIN_FUNCTION_PASSWORD: 'true',
			LOGIN_FUNCTION_SMS: 'false',
			LOGIN_FUNCTION_EMAIL: 'false',
			LOGIN_FUNCTION_FORGET: 'true'
		}
	}
</script>
